<template>

  <VFormDesigner v-if="formType==='designer'"
                 :designer-config="designerConfig"
                 :field-list-data="fieldListData"
                 :global-dsv="globalDsv"
                 @field-widget-used="handleFWU"
                 @field-widget-removed="handleFWR"
                 @form-json-updated="handleFJU"
                 ref="desForm">
  </VFormDesigner>
  <VFormRender v-else :form-json="formJson"></VFormRender>
  <!--  <monaco-editor></monaco-editor>-->
</template>

<script>
import VFormDesigner from './components/form-designer/index.vue'
import MonacoEditor from '@/components/monaco.vue'
import VFormRender from '@/components/form-render/index.vue'

export default {
  name: 'App',
  components: {
    VFormRender,
    MonacoEditor,
    VFormDesigner,
  },
  data() {
    return {
      formJson: {
        'widgetList': [],
        'formConfig': {
          'modelName': 'formData',
          'refName': 'vForm',
          'rulesName': 'rules',
          'labelWidth': 80,
          'labelPosition': 'left',
          'size': '',
          'labelAlign': 'label-left-align',
          'cssCode': '',
          'customClass': '',
          'functions': '',
          'layoutType': 'PC',
          'onFormCreated': '',
          'onFormMounted': '',
          'onFormDataChange': '',
          'onFormValidate': '',
        },
      },
      formData: {},
      optionData: {},

      designerConfig: {
        languageMenu: true,  //是否显示语言切换菜单
        externalLink: false,  //是否显示GitHub、文档等外部链接
        formTemplates: true,  //是否显示表单模板
        componentLib: true,  //是否显示组件库
        chartLib: false,  //是否显示图表库
        metadataLib: false,  //是否显示元数据
        layoutTypeButton: false,  //是否显示表单布局适配按钮组
        eventCollapse: true,  //是否显示组件事件属性折叠面板
        widgetNameReadonly: false,  //禁止修改组件名称

        clearDesignerButton: true,  //是否显示清空设计器按钮
        previewFormButton: true,  //是否显示预览表单按钮
        importJsonButton: true,  //是否显示导入JSON按钮
        exportJsonButton: true,  //是否显示导出JSON器按钮
        exportCodeButton: false,  //是否显示导出代码按钮
        generateSFCButton: false,  //是否显示生成SFC按钮
        saveButton: true,  //是否显示保存按钮
        logoHeader: false,  //是否显示Logo头部区域（仅Pro）

        toolbarMaxWidth: 'auto',  //设计器工具按钮栏最大宽度（单位像素）
        toolbarMinWidth: 300,  //设计器工具按钮栏最小宽度（单位像素）

        productName: '',  //自定义表单设计器名称，对应“VForm Pro”（仅Pro）
        productTitle: '',  //自定义表单设计器标题，对应“表单设计器”（仅Pro）

        presetCssCode: '',  //设计器预设CSS样式代码
        languageName: 'zh-CN',  //界面语言，默认显示中文

        resetFormJson: false,  //是否在设计器初始化时将表单内容重置为空

      },

      //全局数据源变量
      globalDsv: {
        testApiHost: 'http://www.test.com/api',
      },
      // formType: window.$wujie?.props.formType ?? 'render',
      formType: window.$wujie?.props.formType ?? 'designer',

    }
  },
  computed: {
    //
  },
  created() {
    console.log('vform created', this.formType)
  },
  mounted() {
    console.log('vform mounted', this.formType)
    if (this.formType === 'render') {
      this.formJson.widgetList=JSON.parse(window.localStorage.getItem('widget__list__backup'))
      this.formJson.formConfig=JSON.parse(window.localStorage.getItem('form__config__backup'))
      console.log('formJson', this.formJson)
    }
  },
  methods: {
    doTest() {
      console.info('form data schema is: ' + JSON.stringify(this.$refs.vfdRef.buildFormDataSchema()))
    },

    changeThemePrimaryColor() {
      const bodyElement = document.getElementsByTagName('body')[0]
      bodyElement.style.setProperty('--vf-color-primary', 'red')
      bodyElement.style.setProperty('--el-color-primary', 'red')
    },

    handleFWU(fwName) {
      console.info(fwName)
    },

    handleFWR(fwName) {
      console.info(fwName)
    },

    handleFJU(reason) {
      console.warn('form json updated...', reason)
    },

  },
}
</script>

<style lang="scss">

</style>
